<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESD看板二</title>
    <link rel="stylesheet" href="../plugins/element-ui/index.css">
    <style>
        body {
            margin: auto;
            background-color: #030212;
        }
        .el-header{
            background-image: url('../images/TopImg.png'); /* 替换为你的图片路径 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
            background-repeat: no-repeat; /* 背景图片不重复 */
        }

        .statistics {
            margin-left: 1vh;
            margin-right: 1vh;
        }

        .channelTypeNormal{
            margin: 0;
            background-color: #2cc203;
            height: 1.14vw;
        }
        .channelTypeMiss{
            margin: 0;
            background-color: #838181;
            height: 1.14vw;
        }
        .channelTypeError{
            margin: 0;
            background-color: #f73b2d;
            height: 1.14vw;
        }
        .channelTypeStandBy{
            margin: 0;
            background-color: #888621;
            height: 1.14vw;
        }
        .position{
            width: 4.8vw;
            align-items : center ;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .line{
            padding-bottom: 1vh;
            border-radius: 0.5vh;
            border: 0.2vw solid #129ef0;
            box-sizing: border-box;
            position: relative;
            margin: 2vh 0.25vw 1vh;
        }
        .lineName{
            background-color: #129ef0;
            border-radius: 0.5vh;
            position: absolute;
            height: 3vh;
            width: 12%;
            top:-1.5vh;
            color: #ffffff;
            font-weight: bold;
            font-size: 0.8vw;
            left: 2%;
            line-height: 3vh;
            text-align: center;
        }
        .positionName{
            width: 4.56vw;
            font-size: 1.2vh ;
            background-color: white;
            border-bottom-left-radius: 0.3vh;
            border-bottom-right-radius: 0.3vh;
            text-align: center;
        }
        .endPoint{
            display: flex; width: 4.56vw; text-align: center;
        }
        .line .el-row{
            margin-left: 0.9vw;
            margin-right: 0.9vw;
        }
        .devices{
            /* border: solid 0.1vh #666666; */
            border-radius: 0.2vh ;
            align-content: center;
        }
        .el-tabs__item {
            color: #838181;
            font-size: 0.8vw;
        }
        .el-tabs__active-bar{
            background: transparent;
        }
        .user_skills{
            width: 85%;
            margin: auto;
        }
        /*最外层透明*/
        .el-table, .el-table__expanded-cell{
            background-color: transparent;
        }
        /* 表格内背景颜色 */
        .el-table th,
        .el-table tr,
        .el-table td {
            background-color: transparent;
        }
        /*去除底部白线*/
        .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0;
        }
    </style>
</head>
<body>

<div id="app">
    <el-container style="height: 100vh;">
        <el-header height="6vh" style="display: flex;justify-content: center;align-items: center;">
            <div class="title" style="display: flex;justify-content: center;align-items: center;">
                <div style="height: 6vh;">
                    <img :src="logoPath" style="height: 6vh;">
                </div>
                <div>
                    <strong style="color: aliceblue; font-size: 4vh;">ESD监控页面</strong>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="time" id="showTime" style="color: aliceblue; position: absolute; right: 3vw; margin-top: -6vh; font-size: 1vw;">
                {{currentTimeStr}}
            </div>
            <el-row>
                <el-col :span="15" class="devices" id="devices">
                    <el-tabs v-model="activeName">
                        <el-tab-pane v-for="(item , index) in tabsList" :label="item.label" :name="item.name" :key="index">
                            <div class="line" v-for="(line , i) in pageDataList[index]" :key="i">
                                <div class="lineName">生产线:&nbsp;&nbsp;{{line.lineName}}</div>
                                <el-row v-for="(row , j) in line.rowList" :style="getRowStyle(j)" :key="j">
                                    <el-col v-if="deviceVo.channels.length>0" v-for="(deviceVo, k) in row" :span="2" :key="k">
                                            <span :id="deviceVo.id" class="position" v-if="deviceVo.channels.length<=4">
                                                <span class="endPoint">
                                                    <el-tooltip v-for="(channel , l) in deviceVo.channels" :key="l" class="item" effect="dark" content="" placement="bottom">
                                                        <div slot="content" style="font-size: 1.5vh;">
                                                            终端ID:&nbsp;&nbsp; {{deviceVo.id}}
                                                            <br/>
                                                            通道类型:&nbsp;&nbsp; {{channel.channelType}}
                                                            <br/>
                                                            通道编号:&nbsp;&nbsp; {{channel.channelNum}}
                                                            <br/>
                                                            站点位置:&nbsp;&nbsp; {{channel.position}}
                                                            <br/>
                                                            通道状态:&nbsp;&nbsp; 
                                                            <span :style="getChannelStyle(channel.channelStatus)">{{channel.channelStatus}}</span>
                                                            <br/>
                                                            状态详情:&nbsp;&nbsp; 
                                                            <span :style="getChannelStyle(channel.channelStatus)">{{channel.channelDetail}}</span>
                                                            <br v-if="deviceVo.deviceTypeName=='离子风扇'"/>
                                                            <span v-if="deviceVo.deviceTypeName=='离子风扇'">
                                                                平衡电压:&nbsp;&nbsp; {{channel.balancePower}}
                                                            </span>
                                                            <br v-if="deviceVo.deviceTypeName=='离子风扇'"/>
                                                            <span v-if="deviceVo.deviceTypeName=='离子风扇'">
                                                                放电针电压:&nbsp;&nbsp; {{channel.fdzPower}}
                                                            </span>
                                                        </div>
                                                        <img :src="getChannelImg(channel.channelType)"
                                                             :class="getChannelClass(channel.channelStatus)" :style="getStyleObj(deviceVo.channels.length,l)">
                                                    </el-tooltip>
                                                </span>
                                                <span class="positionName">{{deviceVo.position}}</span>
                                            </span>
                                        <span :id="deviceVo.id" class="position" v-else>
                                                <span class="endPoint">
                                                    <el-tooltip class="item" effect="dark" content="" placement="bottom">
                                                        <div slot="content" style="font-size: 1.5vh;">
                                                            终端ID:&nbsp;&nbsp; {{deviceVo.id}}
                                                            <br/>
                                                            通道类型:&nbsp;&nbsp; {{deviceVo.channels[0].channelType}}
                                                            <br/>
                                                            <span>通道状态:</span>&nbsp;&nbsp; 
                                                            <span v-for="(channel , l) in deviceVo.channels">
                                                                <img :src="getChannelImg(channel.channelType)"
                                                                     :class="getChannelClass(channel.channelStatus)" :style="getStyleObj(4,1)">
                                                                    &nbsp;
                                                            </span>
                                                            <br/>
                                                            状态详情:&nbsp;&nbsp; 
                                                            <span v-for="(channel , l) in deviceVo.channels">
                                                                {{channel.channelDetail}}&nbsp;
                                                            </span>
                                                            <br/>
                                                            平衡电压:&nbsp;&nbsp; 
                                                            <span v-for="(channel , l) in deviceVo.channels">
                                                                {{channel.balancePower}}&nbsp;
                                                            </span>
                                                            <br/>
                                                            放电针电压:&nbsp;&nbsp;
                                                            <span v-for="(channel , l) in deviceVo.channels">
                                                                {{channel.fdzPower}}&nbsp;
                                                            </span>
                                                        </div>
                                                        <img src="../images/SVG/EN0.svg" :class="getChannelClass1(deviceVo)" :style="getStyleObj(1,0)">
                                                    </el-tooltip>
                                                </span>
                                                <span class="positionName">{{deviceVo.position}}</span>
                                            </span>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
                <el-col :span="9">
                    <div class="statistics" style="width: 100%;">
                        <div class="statistics-child" style="width: 100%; height: 4vh; margin-top: 5vh;text-align: center;">
                            <span style="color: aliceblue; font-size: 3vh;">ESD通道数据统计</span>
                        </div>
                        <div class="statistics-child" style="width: 100%; margin-top: 1vh; text-align: center;">
                            <el-table
                                    class="user_skills"
                                    :data="analysisList"
                                    :header-cell-style="{background: 'transparent', color: 'aliceblue' }"
                                    :cell-style="addStyle"
                            >
                                <el-table-column
                                        align="center"
                                        prop="channelName"
                                        label="通道类型">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="icon"
                                        label="图标">
                                    <template slot-scope="scope" v-if="scope.$index!=anDataLength">
                                        <img :src="scope.row.icon" style="border-radius: 2px; background-color: #838181 ;width: 20px; height: 20px;"/>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="normal"
                                        label="正常">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="error"
                                        label="异常">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="miss"
                                        label="失联">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="standBy"
                                        label="待机">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="total"
                                        label="总计">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="statistics-child" id="pieDiv" style="width: 100%; height: 28vh; margin-top: 5vh; text-align: center;">
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script src="../plugins/axios/axios.js"></script>
<script src="../plugins/echart/echarts.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            tabsList: [],
            activeName: null,
            pageDataList: [],
            pageDataClock : null ,
            pageClock : null ,
            checkGatewayClock: null ,
            setTimeClock: null ,
            logoPath: null ,
            currentTimeStr: null ,
            analysisList: [] ,
            anDataLength: 0 
        },
        created() {
            this.activeName = "tab1" ;
            let lineCount = 0 ;
            let page_size = 0 ;
            axios.get("/line/getPageSize").then((res) => {
               page_size = res.data ;
            });
            axios.get("/line/getLineCount").then((res) => {
                if (res.data.code === 0) {
                    lineCount = res.data.data;
                    if(lineCount > 0){
                        let tabsCount = Math.ceil(lineCount/page_size);
                        this.tabsList = [];
                        for (let i = 1 ; i <= tabsCount ; i++) {
                            this.tabsList.push({
                                name : 'tab' + i ,
                                label : "页面" + i
                            });
                        }
                    }
                }
            });
            this.pageDataClock = window.setInterval(function(){
                axios.get("/line/getLineDataList").then((res) => {
                    app.pageDataList = res.data ;
                });
                let analysisList1 = [
                    {
                        channelName: '设备接地',
                        icon: '../images/SVG/EM0.svg' ,
                        normal: 0,
                        error: 0,
                        miss: 0,
                        standBy: 0,
                        total: 0
                    },
                    {
                        channelName: '台垫接地',
                        icon: '../images/SVG/RR0.svg' ,
                        normal: 0,
                        error: 0,
                        miss: 0,
                        standBy: 0,
                        total: 0
                    },
                    {
                        channelName: 'ESD手环',
                        icon: '../images/SVG/WH0.svg' ,
                        normal: 0,
                        error: 0,
                        miss: 0,
                        standBy: 0,
                        total: 0
                    },
                    {
                        channelName: '离子风扇',
                        icon: '../images/SVG/EN0.svg' ,
                        normal: 0,
                        error: 0,
                        miss: 0,
                        standBy: 0,
                        total: 0
                    },
                    {
                        channelName: '温度计',
                        icon: '../images/SVG/TE1.svg' ,
                        normal: 0,
                        error: 0,
                        miss: 0,
                        standBy: 0,
                        total: 0
                    },
                    {
                        channelName: '湿度计',
                        icon: '../images/SVG/HU0.svg' ,
                        normal: 0,
                        error: 0,
                        miss: 0,
                        standBy: 0,
                        total: 0
                    },
                    {
                        channelName: '尘埃粒子',
                        icon: '../images/SVG/CL1.svg' ,
                        normal: 0,
                        error: 0,
                        miss: 0,
                        standBy: 0,
                        total: 0
                    },
                    {
                        channelName: '总计',
                        icon: '' ,
                        normal: 0,
                        error: 0,
                        miss: 0,
                        standBy: 0,
                        total: 0
                    }
                ];
                for (let i = 0; i < app.pageDataList.length; i++) {
                    let lineDataList = app.pageDataList[i] ;
                    for (let j = 0; j < lineDataList.length; j++) {
                        let rowList = lineDataList[j].rowList ;
                        for (let k = 0; k < rowList.length; k++) {
                            let deviceVoList = rowList[k] ;
                            for (let l = 0; l < deviceVoList.length; l++) {
                                let deviceVo = deviceVoList[l] ;
                                let channels = deviceVo.channels ;
                                for (let m = 0; m < channels.length; m++) {
                                    let channel = channels[m] ;
                                    if(channel.channelType === '设备接地'){
                                        if (channel.channelStatus === '正常'){
                                            analysisList1[0].normal ++ ;
                                            analysisList1[7].normal ++ ;
                                        }else if (channel.channelStatus === '异常'){
                                            analysisList1[0].error ++ ;
                                            analysisList1[7].error ++ ;
                                        }else if (channel.channelStatus === '待机'){
                                            analysisList1[0].standBy ++ ;
                                            analysisList1[7].standBy ++ ;
                                        }else if (channel.channelStatus === '失联'){
                                            analysisList1[0].miss ++ ;
                                            analysisList1[7].miss ++ ;
                                        }
                                        analysisList1[0].total ++ ;
                                        analysisList1[7].total ++ ;
                                    }else if(channel.channelType === '台垫接地'){
                                        if (channel.channelStatus === '正常'){
                                            analysisList1[1].normal ++ ;
                                            analysisList1[7].normal ++ ;
                                        }else if (channel.channelStatus === '异常'){
                                            analysisList1[1].error ++ ;
                                            analysisList1[7].error ++ ;
                                        }else if (channel.channelStatus === '待机'){
                                            analysisList1[1].standBy ++ ;
                                            analysisList1[7].standBy ++ ;
                                        }else if (channel.channelStatus === '失联'){
                                            analysisList1[1].miss ++ ;
                                            analysisList1[7].miss ++ ;
                                        }
                                        analysisList1[1].total ++ ;
                                        analysisList1[7].total ++ ;
                                    }else if(channel.channelType === 'ESD手环'){
                                        if (channel.channelStatus === '正常'){
                                            analysisList1[2].normal ++ ;
                                            analysisList1[7].normal ++ ;
                                        }else if (channel.channelStatus === '异常'){
                                            analysisList1[2].error ++ ;
                                            analysisList1[7].error ++ ;
                                        }else if (channel.channelStatus === '待机'){
                                            analysisList1[2].standBy ++ ;
                                            analysisList1[7].standBy ++ ;
                                        }else if (channel.channelStatus === '失联'){
                                            analysisList1[2].miss ++ ;
                                            analysisList1[7].miss ++ ;
                                        }
                                        analysisList1[2].total ++ ;
                                        analysisList1[7].total ++ ;
                                    }else if(channel.channelType === '离子风扇'){
                                        if (channel.channelStatus === '正常'){
                                            analysisList1[3].normal ++ ;
                                            analysisList1[7].normal ++ ;
                                        }else if (channel.channelStatus === '异常'){
                                            analysisList1[3].error ++ ;
                                            analysisList1[7].error ++ ;
                                        }else if (channel.channelStatus === '待机'){
                                            analysisList1[3].standBy ++ ;
                                            analysisList1[7].standBy ++ ;
                                        }else if (channel.channelStatus === '失联'){
                                            analysisList1[3].miss ++ ;
                                            analysisList1[7].miss ++ ;
                                        }
                                        analysisList1[3].total ++ ;
                                        analysisList1[7].total ++ ;
                                    }else if(channel.channelType === '温度计'){
                                        if (channel.channelStatus === '正常'){
                                            analysisList1[4].normal ++ ;
                                            analysisList1[7].normal ++ ;
                                        }else if (channel.channelStatus === '异常'){
                                            analysisList1[4].error ++ ;
                                            analysisList1[7].error ++ ;
                                        }else if (channel.channelStatus === '待机'){
                                            analysisList1[4].standBy ++ ;
                                            analysisList1[7].standBy ++ ;
                                        }else if (channel.channelStatus === '失联'){
                                            analysisList1[4].miss ++ ;
                                            analysisList1[7].miss ++ ;
                                        }
                                        analysisList1[4].total ++ ;
                                        analysisList1[7].total ++ ;
                                    }
                                    else if(channel.channelType === '湿度计'){
                                        if (channel.channelStatus === '正常'){
                                            analysisList1[5].normal ++ ;
                                            analysisList1[7].normal ++ ;
                                        }else if (channel.channelStatus === '异常'){
                                            analysisList1[5].error ++ ;
                                            analysisList1[7].error ++ ;
                                        }else if (channel.channelStatus === '待机'){
                                            analysisList1[5].standBy ++ ;
                                            analysisList1[7].standBy ++ ;
                                        }else if (channel.channelStatus === '失联'){
                                            analysisList1[5].miss ++ ;
                                            analysisList1[7].miss ++ ;
                                        }
                                        analysisList1[5].total ++ ;
                                        analysisList1[7].total ++ ;
                                    }else if(channel.channelType === '尘埃粒子'){
                                        if (channel.channelStatus === '正常'){
                                            analysisList1[6].normal ++ ;
                                            analysisList1[7].normal ++ ;
                                        }else if (channel.channelStatus === '异常'){
                                            analysisList1[6].error ++ ;
                                            analysisList1[7].error ++ ;
                                        }else if (channel.channelStatus === '待机'){
                                            analysisList1[6].standBy ++ ;
                                            analysisList1[7].standBy ++ ;
                                        }else if (channel.channelStatus === '失联'){
                                            analysisList1[6].miss ++ ;
                                            analysisList1[7].miss ++ ;
                                        }
                                        analysisList1[6].total ++ ;
                                        analysisList1[7].total ++ ;
                                    }
                                }
                            }
                        }
                    }
                }
                app.analysisList = [] ;
                for(let i = 0; i < analysisList1.length; i++){
                    if(analysisList1[i].total!=0){
                        app.analysisList.push(analysisList1[i]) ;
                    }
                }
                let size1 = app.analysisList.length - 1 ;
                app.anDataLength = size1 ;
                if(size1!=-1){
                    let ecDemo = echarts.init(document.getElementById("pieDiv"));
                    let pieData = [
                        {
                            name: '正常',
                            value: app.analysisList[size1].normal,
                            itemStyle: {color: '#2cc203'}
                        },
                        {
                            name: '异常',
                            value: app.analysisList[size1].error,
                            itemStyle: {color: '#f82d1f'}
                        },
                        {
                            name: '失联',
                            value: app.analysisList[size1].miss,
                            itemStyle: {color: '#5c5a5a'}
                        },
                        {
                            name: '待机',
                            value: app.analysisList[size1].standBy,
                            itemStyle: {color: '#888621'}
                        }
                    ];
                    let option = {
                        series : [
                            {
                                type : 'pie',
                                data : pieData ,
                                label: {
                                    show : true ,
                                    color: 'aliceblue',
                                    formatter: function (args) {
                                        return args.data.name + ': ' + args.percent + '%';
                                    }
                                },
                                roseType : 'radius'
                            }
                        ]
                    }
                    ecDemo.setOption(option);
                }
            }, 3000);

            this.pageClock = window.setInterval(function(){
                let index = parseInt(app.activeName.slice(3));
                if (index < app.tabsList.length){
                    app.activeName = "tab" + (index + 1) ;
                }else {
                    app.activeName = 'tab1' ;
                }
            }, 15000);
            axios.get("/line/getLogoPath").then((res) => {
                this.logoPath = res.data;
            });
            this.checkGatewayClock = window.setInterval(function(){
                axios.get("/gateway/checkLineGateway?lineName=allLine").then((res) => {
                    if (res.data.code === 0) {
                        let serverIps = "" ;
                        let gatewayStatus = res.data.data;
                        let index = 0 ;
                        for (let i = 0; i < gatewayStatus.length; i++) {
                            if (!gatewayStatus[i].connected){
                                if (index === 0){
                                    serverIps = serverIps + gatewayStatus[i].serverIp;
                                }else{
                                    serverIps = serverIps + "、" + gatewayStatus[i].serverIp;
                                }
                                index++ ;
                            }
                        }
                        if (index > 0){
                            app.$message({
                                type: 'error',
                                message: "网关: " + serverIps + " 出现异常！！"
                            });
                        }
                    }
                }).catch((err) => {
                    app.$message({
                        type: 'error',
                        message: "服务器出现异常！！"
                    });
                });

            }, 3000);
            this.setTimeClock = window.setInterval(function(){
                let currentTime = new Date();
                // 格式化年份
                const year = currentTime.getFullYear();
                // 格式化月份
                const month = (currentTime.getMonth() + 1).toString().padStart(2, '0'); // 使用padStart补齐前导零
                // 格式化日期
                const day = currentTime.getDate().toString().padStart(2, '0');
                const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                app.currentDateStr = year + "年" + month + "月" + day + "日  ";
                let hours = currentTime.getHours();
                let minutes = currentTime.getMinutes();
                let seconds = currentTime.getSeconds();
                hours = hours < 10 ? '0' + hours : hours;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                // 这里 this指向的是window, 所以要使用 app
                app.currentTimeStr = year +"/" + month +"/" + day + " " + days[currentTime.getDay()] + "  " + hours + ":" + minutes + ":" + seconds;
            }, 1000);
        },
        mounted(){
        },
        methods: {
            getChannelStyle(status){
                if (status === '失联'){
                    return {
                        'color': '#838181'
                    } ;
                }else if (status === '正常'){
                    return {
                        "color": '#2cc203'
                    } ;
                }else if (status === '异常'){
                    return {
                        "color": '#f73b2d'
                    } ;
                }else{
                    return {
                        "color": '#888621'
                    } ;
                }
            },
            getChannelClass1(deviceVo){
                let channels = deviceVo.channels;
                for(let i = 0; i < channels.length; i++) {
                    if(channels[i].channelStatus === '异常'){
                        return "channelTypeError";
                    }
                }
                let status = deviceVo.channels[0].channelStatus;
                if (status === '失联'){
                    return "channelTypeMiss" ;
                }else if (status === '正常'){
                    return "channelTypeNormal" ;
                }else{
                    return "channelTypeStandBy" ;
                }
            },
            getChannelClass(status){
                if (status === '失联'){
                    return "channelTypeMiss" ;
                }else if (status === '正常'){
                    return "channelTypeNormal" ;
                }else if (status === '异常'){
                    return "channelTypeError" ;
                }else{
                    return "channelTypeStandBy" ;
                }
            },
            getChannelImg(channelTypeName){
                if (channelTypeName === 'ESD手环') {
                    return "../images/SVG/WH0.svg";
                } else if (channelTypeName === '设备接地') {
                    return "../images/SVG/EM0.svg";
                } else if (channelTypeName === '台垫接地') {
                    return "../images/SVG/RR0.svg";
                } else if (channelTypeName === '离子风扇'){
                    return "../images/SVG/EN0.svg";
                }else if (channelTypeName === '温度计'){
                    return "../images/SVG/TE1.svg";
                }else if (channelTypeName === '湿度计'){
                    return "../images/SVG/HU0.svg";
                }else if (channelTypeName === '尘埃粒子'){
                    return "../images/SVG/CL1.svg";
                }
            },
            getRowStyle(index){
                if(index === 0){
                    return {
                        'margin-top': '2vh' ,
                    }
                }else{
                    return {
                        'margin-top': '0.5vh' ,
                    }
                }
            },
            getStyleObj(len , index){
                if(len ===1){
                    return {
                        'border-top-left-radius': '0.3vh' ,
                        'width': '4.56vw',
                        'border-top-right-radius': '0.3vh'
                    }
                }else if(len === 2 && index === 0){
                    return {
                        'border-top-left-radius': '0.3vh' ,
                        'width': '2.28vw'
                    }
                }else if(len === 2 && index === 1){
                    return {
                        'border-top-right-radius': '0.3vh',
                        'width': '2.28vw'
                    }
                }else if(len === 3 && index === 0){
                    return {
                        'border-top-left-radius': '0.3vh' ,
                        'width': '1.52vw'
                    }
                }else if(len === 3 && index === 1){
                    return {
                        'width': '1.52vw'
                    }
                }else if(len === 3 && index === 2){
                    return {
                        'border-top-right-radius': '0.3vh',
                        'width': '1.52vw'
                    }
                }else if(len === 4 && index === 0){
                    return {
                        'border-top-left-radius': '0.3vh' ,
                        'width': '1.14vw'
                    }
                }else if(len === 4 && index === 1){
                    return {
                        'width': '1.14vw'
                    }
                }else if(len === 4 && index === 2){
                    return {
                        'width': '1.14vw'
                    }
                }else{
                    return {
                        'border-top-right-radius': '0.3vh',
                        'width': '1.14vw'
                    }
                }
            },
            addStyle({row,column,rowIndex,columnIndex}){
                if(columnIndex === 1){
                    return ' color: #838181';
                }
                if(columnIndex === 2){
                    return ' color: #2cc203';
                }
                if(columnIndex === 3){
                    return ' color: #f82d1f';
                }
                if(columnIndex === 4){
                    return ' color: #969a9b';
                }
                if(columnIndex === 5){
                    return ' color: #888621';
                }
                if(columnIndex === 6){
                    return ' color: #969a9b';
                }
            }
        },
        beforeDestroy() {
            window.clearInterval(this.pageDataClock);
            window.clearInterval(this.pageClock);
            window.clearInterval(this.checkGatewayClock);
            window.clearInterval(this.setTimeClock);
        }
    });
</script>
</body>
</html>